<script setup lang="ts">
import { requiredCheck, singleIpCheck, validatePortCheck } from "@/utils/verify";
import { ref } from "vue";
import { addData, editData, checkIp } from "@/api/modules/dynamic-camouflage/host-config";

interface Props {
  title?: string;
  rowData?: Object;
}

const props = withDefaults(defineProps<Props>(), {
  title: "新增虚拟主机",
  rowData: undefined
});
defineOptions({
  name: "UpdateForm" // 默认策略
});

async function checkIpCb(ip) {
  if(!ip){
    return false;
  }
  const res = await checkIp({
    ip
  });
  console.log(res.data);
  return res.data;
}

import useUpdate from "@/hooks/useUpdate";
import { ifaceAll, ifacemodeUpdate } from "@/api/modules/dynamic-camouflage/line-config";
import SelectLinksInput from "@/components/SelectLinksInput/index.vue";

const emits = defineEmits(["success"]);
const { updateFormData, updateFormRef, updateFormRules, submit, showHandle, openHandle, closeHandle } = useUpdate({
  rules: {
    name: [...requiredCheck("请选择线路")],
    sentry_ip: [
      ...requiredCheck("请输入虚拟节点"),
      { validator: singleIpCheck },
      {
        validator: async (rule, value, callback) => {
          if (!value) {
            callback();
          }
          let res = await checkIpCb(value);
          if (res) {
            callback();
          } else {
            callback(new Error("节点IP不存在"));
          }
        }
      }
    ],
    sentry_port: [...requiredCheck("请输入虚开端口"), { validator: validatePortCheck }],
    forward_ip: [...requiredCheck("请输入真实IP"), { validator: singleIpCheck }],
    forward_port: [...requiredCheck("请输入真实端口"), { validator: validatePortCheck }]
  },
  defaultData: {}
});

async function submitCb() {
  await submit({
    addApi: addData,
    updateApi: editData,
    sendData: {
      force_ip: "0.0.0.0",
      force_port: "0",
      forward_ip: updateFormData.forward_ip,
      forward_port: updateFormData.forward_port,
      id: updateFormData?.id,
      name: updateFormData?.name,
      sentry_ip: updateFormData?.sentry_ip,
      sentry_port: updateFormData?.sentry_port
    }
  });
  emits("success");
}
</script>

<template>
  <div
    class="update-form mg-r-sm update-form-edit"
    style="display: inline-block; height: 55px"
    @click="
      openHandle({
        row: {
          ...rowData
        },
        id: props.rowData?.id
      });

      getIface();
    "
  >
    <slot>
      <el-button type="primary">新增</el-button>
    </slot>
  </div>
  <base-dialog @confirm="submitCb()" width="550px" :title="title" v-model="showHandle">
    <div class="details">
      <div class="details-main">
        <el-form ref="updateFormRef" :model="updateFormData" :rules="updateFormRules" label-width="120px" label-suffix="：">
          <el-form-item label="线路" prop="name">
            <SelectLinksInput width="140px" isName placeholder="请选择线路" v-model="updateFormData.name" />
          </el-form-item>
          <div></div>
          <el-divider style="width: calc(100% - 40px); margin: 15px auto" />
          <div class="h-box">
            <el-form-item label="虚拟节点" prop="sentry_ip">
              <el-input
                style="width: 140px"
                v-model="updateFormData.sentry_ip"
                auto-complete="off"
                placeholder="请输入虚拟节点"
              />
            </el-form-item>
            <el-form-item label="虚开端口" prop="sentry_port">
              <el-input
                style="width: 120px"
                v-model="updateFormData.sentry_port"
                auto-complete="off"
                placeholder="请输入虚开端口"
              />
            </el-form-item>
          </div>
          <div class="h-box">
            <el-form-item label="真实IP" prop="forward_ip">
              <el-input style="width: 140px" v-model="updateFormData.forward_ip" auto-complete="off" placeholder="请输入真实IP" />
            </el-form-item>
            <el-form-item label="真实端口" prop="forward_port">
              <el-input
                style="width: 120px"
                v-model="updateFormData.forward_port"
                auto-complete="off"
                placeholder="请输入真实端口"
              />
            </el-form-item>
          </div>
        </el-form>
      </div>
    </div>
    <template #footer-more-button></template>
  </base-dialog>
</template>

<style lang="scss" scoped></style>
